<!--
 * @LastEditTime : 2022-10-31 14:59:30
 * @FilePath     : /pyy/src/views/physics/detail/components/detailed.vue
 * @Description  : 物理分析 > 物理分析详情 > 明细表
-->

<template>
  <div class="detailed">
    <div class="header">明细表{{ index + 1 }}</div>
    <div class="contanier">
      <van-field
        readonly
        autosize
        rows="1"
        type="textarea"
        name="sampleName"
        label="试样名称"
        v-model="form.sampleName"
      />
      <van-field
        readonly
        name="sampleCode"
        label="客户试样编号"
        v-model="form.sampleCode"
      />
      <van-field
        readonly
        name="sampleState"
        label="明细表试样状态"
        v-model="form.sampleState"
      />
      <van-field
        readonly
        name="specification"
        label="试样规格"
        v-model="form.specification"
      />
      <van-field
        readonly
        type="number"
        name="amount"
        label="数量"
        v-model="form.amount"
      />
      <van-field
        readonly
        autosize
        rows="1"
        type="textarea"
        input-align="right"
        label-width="max-content"
        name="detectionBig"
        label="检测项目大类"
      >
        <template #input>
          <span
            style="display: block; word-break: break-all"
            v-for="item in form.detectionBig.split(',')"
            :key="item"
          >
            {{ item }}
          </span>
        </template>
      </van-field>
      <van-field
        readonly
        autosize
        rows="1"
        type="textarea"
        input-align="left"
        label-width="max-content"
        name="detectionSmall"
        label="检测项目小类"
      >
        <template #input>
          <span
            style="display: block; word-break: break-all"
            v-for="item in form.detectionSmall.split(',')"
            :key="item"
          >
            {{ item }}
          </span>
        </template>
      </van-field>
      <van-field
        readonly
        type="number"
        name="cost"
        label="费用"
        v-model="form.cost"
      />
      <van-field
        readonly
        autosize
        rows="1"
        type="textarea"
        name="remark"
        label="备注"
        v-model="form.remark"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "Detailed",
  components: {},
  props: {
    // 第几组
    index: {
      type: Number,
      require: true,
      default: 0,
    },
    // 表单录入数据
    form: {
      require: true,
      type: Object,
      default: () => ({
        sampleName: "",
        sampleCode: "",
        sampleState: "",
        specification: "",
        amount: "",
        detectionBig: "",
        detectionSmall: "",
        cost: "",
        remark: "",
      }),
    },
  },
};
</script>

<style lang="less" scoped>
.detailed {
  width: 100%;
  height: max-content;
  font-family: "Inter";
  font-style: normal;
  font-size: 16px;
  line-height: 19px;
  margin-top: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0 12px;

  .header {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    padding: 12px 4px;
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>
